<template>
  <div class="page">
    <div class="containerInner">
      <div class="wrapper">
        <div class="header">
          <div class="group">
            <img
              class="iconUser"
              src="../assets/img/img_0.png"
            />
            <span class="chime">Pistachio</span>
          </div>
<!--          导航栏提取-->
          <Navigation></Navigation>
<!--          登陆注册栏提取-->
          <LoginBar class="login-bar"></LoginBar>
        </div>
        <div class="search">
<!--          搜索框组件提取-->
          <SearchBar></SearchBar>
        </div>
        <div class="body">
          <img
            class="iconCircle"
            src="../assets/img/img_1.png"
          />
          <span class="title"
            >Hello, traveler!</span
          >
          <span class="summary"
            >The fresh air and happy smell will shoot into your soul through the air. I wish you a good morning and incomparable warmth!</span
          >
          <div class="group2">
<!--            背景音乐类型下拉框选择-->
            <el-select v-model="value" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>

          </div>
        </div>
        <img
          class="logo"
          src="../assets/img/img_4.png"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/components/Navigation";
import LoginBar from "@/components/LoginBar";
import SearchBar from "@/components/SearchBar";


export default {
  components: {
    Navigation,
    LoginBar,
    SearchBar,

  },
  data() {
    return {
      content: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods: {
    toSearchPage(){
      this.$router.push('/searchPage')
    }
  },
  // mounted() {
  // },

}
</script>

<style src="./css/Home.css" scoped/>
;
